/**
 * 注册路由
 */

import React, { useState, useEffect } from 'react';
import { Button, InputItem, List, Radio, WhiteSpace, WingBlank } from 'antd-mobile';
import Logo from '../../components/login/logo'
import { register } from '../../api/index'
import { connect } from 'react-redux'

function Register(props) {

  const [param, setparam] = useState({
    type: "laoban"
  })
  const handleChange = (key, value) => {
    setparam({ ...param, [key]: value })    //这种方式更新对象很方便！！
  }

  const handleRegister = async (e) => {
    console.log(param);
    if (param.password === param.password2) {
      register(param).then((result) => {
        props.dispatch({ type: "User_Login", data: result })
        props.history.push("/main")
      }).catch((err) => {
        alert(err)
      });

    }

  }


  return (
    <div>
      <Button type="primary">硅谷招聘</Button>
      <Logo />
      <WhiteSpace />
      <List>
        <InputItem onChange={v => handleChange("username", v)}>用户名: </InputItem>
        <InputItem type="password" onChange={v => handleChange("password", v)}>密　码: </InputItem>
        <InputItem type="password" onChange={v => handleChange("password2", v)}>确认密码: </InputItem>
        <List.Item>
          <span>用户类型:</span>
          &nbsp; &nbsp;
            <Radio checked={param.type === "dashen"} onChange={e => handleChange("type", "dashen")}>大神</Radio>
          &nbsp;&nbsp;
            <Radio checked={param.type === "laoban"} onChange={e => handleChange("type", "laoban")}>老板</Radio>
        </List.Item>
      </List>
      <WhiteSpace />
      <Button type="primary" onClick={handleRegister}>注册</Button>
      <WhiteSpace />
      <Button onClick={e => props.history.push("/login")}>已有账户</Button>
    </div>
  );
}

export default connect()(Register)
